<script setup lang="ts">
import ClassStatus from '@/views/education/class/components/ClassStatus.vue'
import { EnrollmentApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'

const emit = defineEmits(['select'])
const visible = ref(false)
const selectedKeys = ref<string[]>([])
const selectedRecord = ref([])

const form = reactive<EnrollmentApi.EnrollClassQuery>({
  studentId: undefined,
  enrollStatus: 'NORMAL',
  classStatus: [0, 1],
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
} = useTable(page => EnrollmentApi.getEnrollClassPage({ ...form, ...page }), { immediate: false })

// const loading = ref<boolean>(false)
// const enrollClassList = ref<any[]>([])
// const getList = async () => {
//   loading.value = true
//   EnrollmentApi.getEnrollClassList(form).then((res) => {
//     enrollClassList.value = res || []
//   }).finally(() => {
//     loading.value = false
//   })
// }
const columns: TableInstanceColumns[] = [
  {
    title: '班级',
    slotName: 'name',
    fixed: 'left',
    width: 350,
  },
  { title: '年份科目', dataIndex: 'classYear', slotName: 'classYear', width: 150 },
  { title: '校区教室', dataIndex: 'campusId', slotName: 'classroom', width: 120 },
  { title: '班级状态', dataIndex: 'classStatus', slotName: 'classStatus', width: 120 },
  { title: '上课进度(上/退/总)', dataIndex: 'classProgress', slotName: 'classProgress', width: 160 },
]

const rowSelection = {
  type: 'radio',
  showCheckedAll: false,
  onlyCurrent: false,
}

const open = (studentId: string) => {
  form.studentId = studentId
  visible.value = true
  selectedKeys.value = []
  search()
}

const onConfirm = async () => {
  if (selectedKeys.value.length > 0) {
    emit('select', selectedKeys.value[0], selectedRecord.value)
  }
}

const onSelect = (rowKeys, rowKey, record) => {
  selectedRecord.value = record
}

const onRowClick = (row) => {
  selectedKeys.value = [row.id]
  selectedRecord.value = row
  // filterWithPermission.value = false
}

watch(() => form, (_) => {
  search()
}, { deep: true })

defineExpose({ open })
</script>

<template>
  <a-modal
    v-model:visible="visible"
    title="选择班级"
    width="80%"
    :ok-button-props="{ disabled: selectedKeys.length === 0 }"
    @before-ok="onConfirm"
  >
    <a-spin :loading="loading" tip="数据获取中..." class="h-full w-full">
      <ProTable
        v-model:selected-keys="selectedKeys"
        :data="dataList"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        :row-selection="rowSelection"
        :disabled-tools="['size', 'setting']"
        :disabled-column-keys="['name']"
        @refresh="search"
        @select="onSelect"
        @row-click="onRowClick"
      >
        <template #toolbar-left>
          <DictSelect v-model="form.classStatus" code="ClassStatusEnum" type="checkbox" placeholder="选择班级状态" multiple />
        </template>
        <template #name="{ record }">
          <CellClassInfo :id="record.id" :is-link="false" :name="record.name" :lead-teacher-name="record.leadTeacherName" :assist-teacher-name="record.assistTeacherName" />
        </template>
        <template #classYear="{ record }">
          <DictLabel v-model="record.grade" code="Grade" /> · <DictLabel v-model="record.subject" code="Subject" />
          <div class="text-13px text-gray-4">
            {{ record.classYear }}年 · <DictLabel v-model="record.term" code="TermEnum" />
          </div>
        </template>
        <template #classroom="{ record }">
          <div>{{ record.classroomName || '-' }}</div>
          <div class="text-13px text-gray-4">
            {{ record.campusName }}
          </div>
        </template>
        <template #classStatus="{ record }">
          <ClassStatus code="ClassStatusEnum" :status="record.classStatus" />
        </template>
        <template #classProgress="{ record }">
          {{ record.enrollment.completedLessonCount }}/{{ record.enrollment.cancelLessonCount }}/{{ record.enrollment.enrollLessonCount }}
        </template>
        <template #action="{ record }">
          <a-button v-permission="'system:user:write'" type="text" @click.stop="onRowClick(record)">
            <span style="margin-right: 10px">选择</span>
            <icon-down />
          </a-button>
        </template>
      </ProTable>
    </a-spin>
  </a-modal>
</template>

<style lang="less" scoped>

</style>
